<!-- 新增 -->
<div id="createOrUpdateDialog" class="crudDialog">
    <form id="dialog-from">
        <div class="radio-group update-hidden">
            <div class="radio radio-inline radio-success">
                <input id="type_1" type="radio" name="type" value="1" checked>
                <label for="type_1">系统</label>
            </div>
            <div class="radio radio-inline radio-info">
                <input id="type_2" type="radio" name="type" value="2">
                <label for="type_2">目录</label>
            </div>
            <div class="radio radio-inline radio-warning">
                <input id="type_3" type="radio" name="type" value="3">
                <label for="type_3">菜单</label>
            </div>
        </div>
        <div class="form-group update-hidden">
            <span class="type2 type3">
                <select id="systemId" name="systemId">
                </select>
            </span>
            <span class="type3">
                <select id="directoryId" name="directoryId" hidden>
                </select>
            </span>
        </div>

        <div class="form-group">
            <label for="name">名称</label>
            <input name="name" id="name" type="text" class="form-control">
        </div>
        <div class="form-group">
            <label for="icon">图标</label>
            <input name="icon" id="icon" type="text" class="form-control">
        </div>
        <div class="type1">
            <label for="skin">主题</label>
            <div id="skin" class="radio-group">
                <div class="radio radio-inline radio-skin-green ">
                    <input id="skin_1" type="radio" name="skin" value="skin-green" checked>
                    <label for="skin_1">绿</label>
                </div>
                <div class="radio radio-inline radio-skin-dark-blue">
                    <input id="skin_2" type="radio" name="skin" value="skin-dark-blue">
                    <label for="skin_2">深蓝</label>
                </div>
                <div class="radio radio-inline radio-skin-pink">
                    <input id="skin_3" type="radio" name="skin" value="skin-pink">
                    <label for="skin_3">粉紅</label>
                </div>
                <div class="radio radio-inline radio-skin-purple">
                    <input id="skin_4" type="radio" name="skin" value="skin-purple">
                    <label for="skin_4">紫</label>
                </div>
                <div class="radio radio-inline radio-skin-blue">
                    <input id="skin_5" type="radio" name="skin" value="skin-blue">
                    <label for="skin_5">蓝</label>
                </div>
            </div>
        </div>
        <div class="form-group type3">
            <label for="href">路径</label>
            <input name="url" id="href" type="text" class="form-control">
        </div>
        <div class="form-group type3">
            <label for="permission">权限标识</label>
            <input name="permission" id="permission" type="text" class="form-control">
        </div>
        <div class="form-group text-right dialog-buttons">
            <a class="waves-effect waves-button" href="javascript:;" onclick="createOrUpdateSubmit();">提交</a>
            <a class="waves-effect waves-button" href="javascript:;" onclick="createOrUpdateDialog.close();">取消</a>
        </div>

    </form>
</div>
<script>
    var selfId = 0;
    var type = 1;
    var id = updateId;
    console.log('update:=>', id);

    function getMenu(id, cb) {
        iGet('/api/menus/' + id, cb, function () {
            createOrUpdateDialog.close();
            $.alert({
                title: false,
                theme: 'dark',
                content: '加载数据失败',
            });
        });
    }

    $(function () {
        // 选择分类
        $('input:radio[name="type"]').change(function () {
            type = $(this).val();
            initType();
        });
        // 选择系统
        $('#systemId').change(function () {
//            console.log('---------')
            selfId = $(this).val();
            initPid();
        });
        initParams();
        initType();
        initSystemSelect();
        initPid();
    });

    //初始化对话框参数
    function initParams() {
        if (id != 0) {
            $('.update-hidden').hide();
            getMenu(id, function (data) {
                var menu = data;
                type = menu.depth;
                for (var p in menu) {
                    if (p != 'skin') {
                        $("input[name=" + p + "]").val(menu[p]);
                    }
                }
                if (type == 1) {
//                    console.log('skin:=>',menu.skin);
                    $("input:radio[value=" + menu.skin + "]").attr("checked", true);
                }
            })
        }
    }

    function initType() {
        // 显示对应必填项
        $('.type1,.type2,.type3').hide(0, function () {
            $('.type' + type).show();
        });
    }

    function initSystemSelect() {
        $.getJSON('/api/menus/' + 1 + '/child', function (json) {
            var nodes = json;
            var datas = [{id: 0, text: '请选择系统'}];
            for (var i = 0; i < nodes.length; i++) {
                var data = {};
                data.id = nodes[i].id;
                data.text = nodes[i].name;
                datas.push(data);
            }
            $('#systemId').select2({
                data: datas
            });
        });

    }

    function initPid() {
        if (selfId != 0) {
            $.getJSON('/api/menus/' + selfId + '/child', function (json) {
                var nodes = json;
                var datas = [{id: 0, text: '请选择上级'}];
                for (var i = 0; i < nodes.length; i++) {
                    var data = {};
                    data.id = nodes[i].id;
                    data.text = nodes[i].name;
                    datas.push(data);
                }
                $('#directoryId').empty();
                $('#directoryId').select2({
                    data: datas
                });
            });
        } else {
            $('#directoryId').empty();
            $('#directoryId').select2({
                data: [{id: 0, text: '请选择上级'}]
            });
        }
    }

    function createOrUpdateSubmit() {
        var data = {};
        $('#dialog-from').serializeArray().map(function (x) {
            data[x.name] = x.value;
        });
        console.log(data);
        var path_id = 0;
        data.depth = type;
        if (id != 0) {
            path_id = id;
        } else if (type == 1) {
            path_id = 1;
        } else if (type == 2) {
            delete data.skin;
            path_id = data.systemId;
        } else if (type == 3) {
            delete data.skin;
            path_id = data.directoryId;
        }
        //数据提交
        var beforeSend = function () {
            if ($('#name').val() == '') {
                $('#name').focus();
                return false;
            }
            if ($('#roleType').val() == '') {
                $('#roleType').focus();
                return false;
            }
        }
        var success = function (result) {
            //更新nextable
            if (id == 0) {
                var parentId = path_id == 1 ? 0 : path_id;
                addNestableNode(parentId, result)
            } else {
                updateNestableNode(result)
            }
            createOrUpdateDialog.close();
        }
        var error = function (jqXHR, textStatus) {
            $.confirm({
                theme: 'dark',
                animation: 'rotateX',
                closeAnimation: 'rotateX',
                title: false,
                content: textStatus != 'canceled' ? '系统异常' : '请输入',
                buttons: {
                    confirm: {
                        text: '确认',
                        btnClass: 'waves-effect waves-button waves-light'
                    }
                }
            });
        }
        console.log(data);
        if (id == 0) {
            data.parent = {};
            data.parent.id = path_id;
            iPost('/api/menus', data, beforeSend, success, error);
        } else {
            iPut('/api/menus/' + path_id, data, beforeSend, ()=>success(Object.assign(data,{id:path_id})), error);
        }
    }
</script>